{layout 'layout.latte'}


{block content}
<script src="/theme/js/view-image.min.js"></script>

<div class="bg-gray-100 ">
    <div class="mx-auto max-w-7xl  bg-no-repeat bg-opacity-70 bg-auto"
         style="background-image: url('/theme/images/banner.jpg')">
        <div class="bg-gray-100 bg-opacity-80">
            <div
                    class="flex flex-col justify-center items-center text-center bg-gradient-to-r from-gray-100 via-transparent to-gray-100"
                    style="height: 200px; ">
                <div class=" text-gray-900 text-2xl mb-4 font-bold">
                    {_'images'}
                </div>

                {* 位置导航 *}
                <div class="text-gray-500">
                    <div class=" flex flex-row gap-2">
                        <div>
                            <a href="/" class="hover:underline">{_'home'}</a>
                        </div>
                        <div>&rsaquo;&rsaquo;</div>
                        <div><a class="hover:underline" href="/page/article">{_'images'}</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mx-auto  max-w-7xl mt-6 lg:min-h-screen">
    {var $data = \App\Content\Service\Article::page(limit: 20, image: true)}

    <ul class="grid grid-cols-4 gap-6 mb-8">
        <li n:foreach="$data->items() as $item">
            <img alt="{$item->title}" class="shadow rounded object-cover h-40 w-full bg-gray-100 cursor-pointer hover:opacity-80" src="{$item->images[0]}" onclick='ViewImage.display({$item->images}, {$item->images[0]})'>
            <div class="mt-2"><a class="text-base block hover:underline hover:underline" href="/page/article-info/{$item->id}">{$item->title}</a></div>
        </li>
    </ul>

    <div class="flex justify-center">
        {* 文章分页-自定义分页模板 *}
        {include 'paginate.latte', paginator: $data, prefix: '/page/images'}
    </div>
</div>

{/block}